<template>
  <div class="home">
    <button @click="showCommonDialog">commonDialog</button>
    <button @click="test2">commonDialog2</button>
    <button @click="animTest">动画测试</button>
    <button @click="toastTest">Toast</button>
    <button @click="test3">选择弹窗</button>
    <button @click="test4">底部弹窗</button>
  </div>
  <div class="box" ref="box">

  </div>
</template>

<script>
import {ref} from 'vue'
import Dialog from '/src/components/common/dialog'
import Toast from "/src/components/common/toast";
import BottomTest from "/src/components/common/BottomTest";
import Velocity from 'velocity-animate'

export default {
  name: 'Home',
  setup() {
    const box = ref();
    const showCommonDialog = () => {
      Dialog.common({
        dark: true,
        content: '这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容',
        // onConfirm: (dismiss) => {
        //
        // },
        onCancel: () => {
          console.log('点击取消xxx')
        }
      })
    }
    const test2 = () => {
      Dialog.common({
        title: '温馨提示',
        content: '这是内容这是',
        outSideCancel: false,
        onConfirm: () => {
          console.log('点击确定')
        },
        onCancel: () => {
          console.log('点击取消xxx')
        }
      })

    }
    const animTest = () => {
      Velocity(box.value, {left: '200px'}, {duration: 500, easing: 'spring'})
    }

    const toastTest = () => {
      Toast.show('啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊')
    }

    const test3 = () => {
      Dialog.choose({
        dark:true,
        items: [
          {
            name: 'test1',
          },
          {name: 'test2'},
          {name: 'test3'}
        ],
        onItemClick: index => {
          // console.log('onItemClick---->' + index)
          Toast.show(`选中了第${index}个`)
        }
      });
    }
    const test4 = () => {

      Dialog.custom(BottomTest, {
        dark:true,
      });
    }
    return {
      showCommonDialog,
      test2,
      animTest,
      box, toastTest,
      test3,
      test4
    }
  }
}
</script>
<style scoped>
.box {
  width: 100px;
  height: 100px;
  background: #f00;
  position: absolute;
  left: 0;
  top: 100px;
}
</style>
